<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息列表</title>
    <link rel="stylesheet" th:href="@{/style.css}">
</head>
<body>
<div class="container">
    <table class="styled-table">
        <thead>
        <tr>
            <th>序号</th>
            <th class="sortable" onclick="sortTable(1)">姓名 ▼</th>
            <th class="sortable" onclick="sortTable(2)">年龄 ▼</th>
            <th class="sortable" onclick="sortTable(3)">性别 ▼</th>
            <th class="sortable" onclick="sortTable(4)">地址 ▼</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody id="tableBody">
        <tr th:object="${user}" th:each="user, iterStat : ${userList}">
            <td th:text="${iterStat.count}"></td>
            <td th:text="*{name}"></td>
            <td th:text="*{age}"></td>
            <td >
                <!--给不同性别应用不同css-->
                <span th:classappend="*{gender == true} ? 'gender-tag male' : 'gender-tag female'"
                      th:text="*{gender} ? 'male':'female'"></span>
            </td>
            <td th:text="*{address}"></td>
            <td class="description" th:text="*{description}"></td>
        </tr>
        </tbody>
    </table>
</div>
<script th:src="@{/script.js}"></script>
</body>
</html>